<template>
  <div class="user-management-container">
    <div class="page-header">
      <h1>用户管理</h1>
      <p>管理系统用户信息、角色权限和账号状态</p>
    </div>

    <el-card class="content-card">
      <!-- 操作按钮区域 -->
      <div class="action-buttons">
        <el-button type="primary" @click="handleAdd">新增用户</el-button>
      </div>
      <!-- 搜索筛选区域 -->
      <div class="search-filter">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="用户名">
            <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable style="width: 180px;" />
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="searchForm.realName" placeholder="请输入真实姓名" clearable style="width: 180px;" />
          </el-form-item>
          <el-form-item label="角色类型">
            <el-select v-model="searchForm.roleType" placeholder="请选择角色类型" clearable style="width: 180px;">
              <el-option v-for="role in roleTypeOptions" :key="role.value" :label="role.label" :value="role.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px;">
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 数据表格 -->
      <el-table v-loading="loading" :data="userList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="username" label="用户名" max-width="60" />
        <el-table-column prop="realName" label="真实姓名" max-width="60" />
        <el-table-column prop="email" label="电子邮箱" max-width="60" />
        <el-table-column prop="phone" label="手机号码" max-width="60" />
        <el-table-column prop="departmentName" label="所属部门" max-width="60" />
        <el-table-column prop="roleName" label="角色类型" max-width="60" />

        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleView(scope.row)" :disabled="!scope.row.status">
              查看
            </el-button>
            <el-button type="warning" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-popconfirm :title="scope.row.status === 1 ? '确定要禁用该用户吗？' : '确定要启用该用户吗？'"
              @confirm="handleToggleStatus(scope.row)" placement="top">
              <template #reference>
                <el-button :type="scope.row.status === 1 ? 'danger' : 'success'" size="small">
                  {{ scope.row.status === 1 ? '禁用' : '启用' }}
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 编辑用户对话框 -->
      <el-dialog v-model="editDialogVisible" title="编辑用户" width="600px" :close-on-click-modal="false">
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
          <el-form-item label="用户名" disabled>
            <el-input v-model="viewForm.username" placeholder="用户名" />
          </el-form-item>
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="editForm.realName" placeholder="请输入真实姓名" clearable />
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="editForm.email" type="email" placeholder="请输入电子邮箱" clearable />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="editForm.phone" placeholder="请输入手机号码" clearable />
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentId">
            <el-select v-model="editForm.departmentId" placeholder="请选择所属部门" clearable>
              <el-option v-for="(name, id) in departmentMap" :key="id" :label="name" :value="parseInt(id)" />
            </el-select>
          </el-form-item>
          <el-form-item label="角色类型" prop="roleType">
            <el-select v-model="editForm.roleType" placeholder="请选择角色类型" clearable>
              <el-option v-for="role in roleTypeOptions" :key="role.value" :label="role.label" :value="role.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态" prop="status">
            <el-radio-group v-model="editForm.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleEditSubmit">确定</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.size"
          :page-sizes="[2,10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

      <!-- 查看详情对话框 -->
      <el-dialog v-model="viewDialogVisible" title="查看用户详情" width="600px" :close-on-click-modal="false">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="用户名">{{ viewForm.username }}</el-descriptions-item>
          <el-descriptions-item label="真实姓名">{{ viewForm.realName }}</el-descriptions-item>
          <el-descriptions-item label="电子邮箱">{{ viewForm.email }}</el-descriptions-item>
          <el-descriptions-item label="手机号码">{{ viewForm.phone }}</el-descriptions-item>
          <el-descriptions-item label="所属部门">{{ viewForm.departmentName }}</el-descriptions-item>
          <el-descriptions-item label="角色类型">{{ viewForm.roleName }}</el-descriptions-item>
          <el-descriptions-item label="账号状态">
            <el-tag :type="viewForm.status === 1 ? 'success' : 'danger'">
              {{ viewForm.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatDate(viewForm.updateTime) }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>

      <!-- 新增用户对话框 -->
      <el-dialog v-model="addDialogVisible" title="新增用户" width="600px" :close-on-click-modal="false">
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username" placeholder="请输入用户名" clearable />
          </el-form-item>
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="addForm.realName" placeholder="请输入真实姓名" clearable />
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="addForm.email" type="email" placeholder="请输入电子邮箱" clearable />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="addForm.phone" placeholder="请输入手机号码" clearable />
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentId">
            <el-select v-model="addForm.departmentId" placeholder="请选择所属部门" clearable>
              <el-option v-for="(name, id) in departmentMap" :key="id" :label="name" :value="parseInt(id)" />
            </el-select>
          </el-form-item>
          <el-form-item label="角色类型" prop="roleType">
            <el-select v-model="addForm.roleType" placeholder="请选择角色类型" clearable>
              <el-option v-for="role in roleTypeOptions" :key="role.value" :label="role.label" :value="role.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态" prop="status">
            <el-radio-group v-model="addForm.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useUser } from '../hooks/useUser';

// 使用用户管理相关的hooks
const {
  // 数据
  roleTypeOptions,
  departmentMap,
  searchForm,
  pagination,
  loading,
  userList,
  viewDialogVisible,
  viewForm,
  addDialogVisible,
  addFormRef,
  addForm,
  addFormRules,
  editDialogVisible,
  editFormRef,
  editForm,
  editFormRules,
  
  // 方法
  formatDate,
  getRoleName,
  getDepartmentName,
  loadUsers,
  handleSearch,
  handleReset,
  handleView,
  handleEdit,
  handleEditSubmit,
  handleAdd,
  handleSubmit,
  handleToggleStatus,
  handleSizeChange,
  handleCurrentChange
} = useUser();

// 页面挂载时加载数据
onMounted(() => {
  loadUsers();
});
</script>

<style scoped>
.user-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.page-header p {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

.content-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.action-buttons {
  padding: 20px 20px 0;
}

.search-filter {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.pagination-container {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .search-form .el-form-item {
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .user-management-container {
    padding: 10px;
  }

  .search-filter {
    padding: 15px;
  }

  .pagination-container {
    padding: 15px 10px;
  }
}
</style>